import React, {useEffect, useState} from 'react';
import {Button, Modal, notification, Table,} from "antd";
import axios from "axios";
import style from './NewsDraft.module.css'
import {DeleteOutlined, EditOutlined, RocketOutlined, ExclamationCircleOutlined} from "@ant-design/icons";

const {confirm} = Modal;


export default function NewsDraft(props) {
    const [dataSource, setDataSource] = useState([]);

    const {username} = JSON.parse(localStorage.getItem('token'))

    useEffect(() => {
        axios.get(`/news?author=${username}&auditState=0&_expand=category`).then(res => {
            console.log(res.data)
            setDataSource(res.data)
        })
    }, [username])

    const columns = [
        {
            title: 'ID',
            dataIndex: 'id',
            render: (id) => {
                return <b>{id}</b>
            }
        },
        {
            title: '新闻标题',
            dataIndex: 'title',
            render:(title,item) => {
                return <a href={`#/news-manage/preview/${item.id}`}>{title}</a>
            },
            // todo=>限制该列宽
        },
        {
            title: '作者',
            dataIndex: 'author',
        },
        {
            title: '新闻分类',
            dataIndex: 'category',
            render:(category) => {
                return category.title
            }
        },
        {
            title: '操作',
            render: (item) => {
                return <div className='noselect'>
                    <Button className={style.SubmitReview} type="primary" shape="circle" icon={<RocketOutlined />} onClick={() => {handleSubmitReview(item)}}/>
                    &nbsp;&nbsp;
                    <Button type="primary" ghost shape="circle" icon={<EditOutlined />}
                            onClick={() => props.history.push(`/news-manage/update/${item.id}`)}
                    />
                    &nbsp;&nbsp;
                    {/*<Button className={style.SubmitReview} type="primary" shape="circle" icon={<RocketOutlined />} onClick={() => {}}/>*/}
                    {/*&nbsp;&nbsp;*/}
                    <Button danger shape="circle" icon={<DeleteOutlined/>} onClick={() => confirmDel(item)}/>
                </div>
            }
        },
    ]


    // 删除确认提示框
    const confirmDel = (item) => {
        confirm({
            title: '你确定要删除?',
            icon: <ExclamationCircleOutlined/>,
            okText: '确认',
            okType: 'danger',
            cancelText: '取消',
            onOk() {
                deleteMethod(item)
            },
            onCancel() {
                console.log('取消');
            },
        });
    }

    // 确认删除后执行的函数
    const deleteMethod = (item) => {
        // console.log(item);

        setDataSource(dataSource.filter(data => data.id !== item.id))
        // 后端同步
        axios.delete(`/news/${item.id}`).then()
    }

    // 按提交审核按钮后执行的函数
    const handleSubmitReview = (item) => {
        setDataSource(dataSource.filter(data => data.id !== item.id))
        axios.patch(`/news/${item.id}`,{
            auditState:1
        }).then(() => {
            // 通知成功
            notification.success({
                message: '恭喜您！',
                description:
                    '提交审核成功，您可以在【新闻管理/审核列表】中查看',
            });
            // 跳转到相应页面
            // props.history.push('/audit-manage/list')
        })
    }

    return (
        <div>
            <Table dataSource={dataSource} columns={columns}
                   rowKey={item => item.id}/> {/* 因为返回的数据中没有 key 属性，所以需要自己设置一个 rowKey */}
        </div>
    )
}